import { View } from "@tarojs/components";
import { Badge, Image } from "@taroify/core";
import { imgAddPrefix } from "@/utils";
import { ArticleType } from "@/types";
import { CommentOutlined } from "@taroify/icons";
import BarCardName2 from "./BarCardName2";

interface BarArticleCardProps {
  BarCard?: {
    // 用户头像
    sectorUrl: string;
    kid: string;
    sectorName: string;
    size?: number;
    starCount?: number | string;
  };
  article?: ArticleType;
}

export default ({
  BarCard = {
    kid: "1872672201114361858",
    sectorName: "我锤石你德玛",
    sectorUrl: "/forum/20241227/d375bd77-e697-4dff-a18d-cefdee0feacf.png",
  },
  article = {
    contextUrl: "/forum/20241227/d375bd77-e697-4dff-a18d-cefdee0feacf.png",
    likeCount: 10,
    title: "玄德何许人也？",
    kid: "1872672201114361858",
  },
}: BarArticleCardProps) => {
  const { contextUrl, title, likeCount } = article;
  function getFirstImg() {
    if (contextUrl) return imgAddPrefix(contextUrl.split(",")[0] ?? "");
  }
  return (
    <View className="rounded-2xl shadow ">
      <View className="relative w-full h-64 mb-2 ">
        <Image
          mode="aspectFill"
          className="rounded-xl w-full h-full"
          src={getFirstImg()}
        />
        <View className="absolute text-white  bottom-0 text-sm box-border bg-black opacity-50 inset-x-0 h-8 flex justify-between items-center p-2">
          <View className="">{title}</View>
          <View className="flex items-center gap-1">
            <CommentOutlined />
            {likeCount}
          </View>
        </View>
      </View>
      <View className="p-2">
        <BarCardName2 {...BarCard} />
      </View>
    </View>
  );
};
